<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.js"></script>
    <script src="./js/qs.js"></script>
    <script>
        /*
            GET类型请求-无请求体请求
            axios.get(url[, config])
            axios.delete(url[, config])
            - 是有运行的环境自行决定是否发送的 - 检测服务器功能
            axios.head(url[, config])  - 无响应结果
            axios.options(url[, config])

            POST类型请求-有请求体参数
            axios.post(url [, data[, config] ] )
                  - data 请求体参数
            axios.put(url[, data[, config]])
            axios.patch(url[, data[, config]])
        */

        function headAjax(){
            // axios({
            //     url:"http://127.0.0.1/filmApi/loadFilms.php",
            //     method:"head"
            // })
            axios.head("http://127.0.0.1/filmApi/loadFilms.php")
                 .then(function(response){
                    console.log(response);
                 })
                 .catch(function(){

                 })
        }
        function optionsAjax(){
            // axios({
            //     url:"http://127.0.0.1/filmApi/loadFilms.php",
            //     method:"options"
            // })
            axios.options("http://127.0.0.1/filmApi/loadFilms.php")
                 .then(function(response){
                    console.log(response);
                 })
                 .catch(function(){

                 })
        }

        function getAjax(){
            // axios({
            //     url:"http://127.0.0.1/filmApi/loadFilms.php",
            //     method:"get",
            //     params:{ size:2 }
            // })
            axios.get("http://127.0.0.1/filmApi/loadFilms.php",{
                params:{ size:2 }
            }).then(function(response){
                console.log(response);
            })
            .catch(function(){

            })
        }

        function postAjax(){
            // axios({
            //     url:"http://127.0.0.1/filmApi/loadFilms.php",
            //     method:"post",
            //     data:Qs.stringify({
            //         size:2,
            //         no:2
            //     })
            // })
            axios.post(
                "http://127.0.0.1/filmApi/loadFilms.php",
                Qs.stringify({
                    size:2,
                    no:2
                })
            ).then(function(response){
                console.log(response);
            })
            .catch(function(){

            })
        }


        function postAjax2(){
            // 通过 null 进行data占位
            axios.post(
                "http://127.0.0.1/filmApi/loadFilms.php",
                null,
                {
                    headers:{
                        "test":"aaaa"
                    }
                }
            ).then(function(response){
                console.log(response);
            })
            .catch(function(){

            })
        }
    </script>
</head>
<body>
    <input type="button" value="发送head请求" onclick="headAjax()">
    <input type="button" value="发送options请求" onclick="optionsAjax()">
    <input type="button" value="发送get请求" onclick="getAjax()">
    <input type="button" value="发送post请求" onclick="postAjax()">
    <input type="button" value="发送post请求-无参数有配置" onclick="postAjax2()">


</body>
</html>